<template>
  <div class="passwordNew">
    <div class="login_div">
      <div class="login_box header">
        <div class="w">
          <span class="gsmc">佰联管理后台</span>
          <span class="gstg">机械零部件行业营销推广</span>
        </div>
      </div>
      <div class="login_box content">
        <div class="content_box">
          <div class="login_con">
            <div class="zh_tit" v-if="current!=2">找回密码</div>
            <div class="bz">
              <a-steps :current="current" v-if="current!=2">
                <a-step v-for="item in steps" :key="item.title" :title="item.title" />
              </a-steps>
              <!--  -->
              <div class="steps-content" v-if="current==0">
                <div class="yz">
                  <span class="inp_tit">手机号码</span>
                  <!-- <input placeholder="请输入手机号码" v-model="phone" /> -->
                    <input
                      type="text"
                      maxlength="11"
                      onkeyup="value=value.replace(/[^\d]/g,'') "
                      onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
                      class="input"
                      v-model="phone"
                      placeholder="请输入手机号码"
                    />
                  <span class="form_yz" v-if="!phone">
                    <a-icon type="close-circle" />请输入已注册的手机号
                  </span>
                </div>
                <div class="yz yzm">
                  <span class="inp_tit">验证码</span>
                  <input placeholder="请输入验证码" v-model="inputcode" />
                  <span class="code">
                    <a-button @click="getcode" :disabled="phone==''">获取验证码</a-button>
                    <span class="dateup" v-if="secflg">{{count}}后在尝试...</span>
                  </span>
                  <span class="form_yz" v-if="!inputcode">
                    <a-icon type="close-circle" />请输入验证码
                  </span>
                </div>
              </div>
              <div class="steps-content" v-if="current==1">
                <div class="yz">
                  <span class="inp_tit">新密码</span>
                  <input placeholder type="password" v-model="newpass" />
                  <span class="form_yz" v-if="!newpass">
                    <a-icon type="close-circle" />不能为空
                  </span>
                </div>
                <div class="yz qrmm">
                  <span class="inp_tit">确认新密码</span>
                  <input placeholder type="password" v-model="querenpass" />
                  <span class="form_yz" v-if="!querenpass">
                    <a-icon type="close-circle" />不能为空
                  </span>
                </div>
              </div>
              <div class="steps-content" v-if="current==2">
                <div class="over">
                  <div class="success">
                    <a-icon type="check-circle" theme="filled" />您的密码已重置成功!
                  </div>
                  <div class="center">账号：{{zh}}</div>
                  <div class="center">账号(创建者)：{{boss}}</div>
                </div>
              </div>
              <div class="steps-action sub">
                <a-button v-if="current==0" :disabled="phone==''||inputcode==''" type="primary" @click="nextone">下一步</a-button>
                <a-button v-if="current==1" :disabled="phone==''||querenpass==''||newpass==''" type="primary" @click="nexttwo">下一步</a-button>
                <router-link v-if="current != 2" to="/login" style="margin-left:10px;">直接登录</router-link>
                <a-button v-if="current == 2" type="primary">
                  <router-link to="/login">完成</router-link>
                </a-button>
                <!-- <a-button v-if="current>0" style="margin-left: 8px" @click="prev">上一步</a-button> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="login_box footer">
        <div class="fot_tit">西安佰联网络技术有限公司 Copyright 佰联轴承网 陕ICP备12004210号-2</div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      current: 0,
      steps: [
        {
          title: "身份验证",
          content: "First-content"
        },
        {
          title: "重置密码",
          content: "Second-content"
        },
        {
          title: "完成",
          content: "Last-content"
        }
      ],
      phone: "",
      inputcode: "",
      code: "",
      newpass: "",
      querenpass: "",
      zh: "",
      boss: "",
       secflg: false,
      count: "",
      timer: null,
    };
  },
  methods: {
    nextone() {
      if(this.phone!=''&&this.inputcode!=''){
 this.axios
        .post(
          "login/ForgetPassCheck.php",
          qs.stringify({
            account: this.phone,
            msgCode: this.inputcode
          })
        )
        .then(res => {
       
          if (res.data.code == 303) {
            this.current++;

            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "警告",
              description: res.data.msg
            });
          }
        });
      }else{
        this.$notification["error"]({
              message: "警告",
              description: '手机号或验证码不能为空！！！'
            });
      }
     
    },
    nexttwo() {
      this.axios
        .post(
          "login/ForgetPassReset.php",
          qs.stringify({
            account: this.phone,
            passWord: this.newpass,
            rePass: this.querenpass
          })
        )
        .then(res => {
       
          if (res.data.code == 303) {
            this.zh = res.data.result.account;
            this.boss = res.data.result.create_account;
            this.current++;

            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "警告",
              description: res.data.msg
            });
          }
        });
    },
    prev() {
      this.current--;
    },
    getcode() {
      
   
      this.axios
        .post(
          "login/GetCode.php",
          qs.stringify({
            account: this.phone,
            login_type: 1
          })
        )
        .then(res => {
   
          if (res.data.code == 303) {
            this.code = res.data.result;
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
             const time_count = 60;
            if (!this.timer) {
              this.count = time_count;
              this.secflg = true;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= time_count) {
                  this.count--;
                } else {
                  this.secflg = false;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
            }
          } else {
            this.$notification["error"]({
              message: "警告",
              description: res.data.msg
            });
          }
        });
    }
  }
};
</script>

<style lang='less' >
.steps-content {
  margin-top: 16px;
  border-radius: 6px;
  min-height: 200px;
  text-align: center;
  padding-top: 60px;
  text-align: left;
}

.steps-action {
  margin-top: 24px;
}
.passwordNew {
  position: relative;
  z-index: 999;
  height: auto;
  width: 100%;
  .login_div {
    height: 100%;

    .content {
      background-color: #f3f7f9;
      height: 720px;
      overflow: hidden;
      .content_box {
        position: relative;
        width: 920px;
        height: 485px;
        background-color: #fff;
        margin: 80px auto;
        text-align: left;
        .login_con {
          position: relative;
          display: inline-block;
          width: 100%;
          height: 100%;
          border-top: 2px solid #0076fe;
          .zh_tit {
            width: 100%;
            text-align: center;
            padding: 30px 0;
            font-size: 18px;
          }
          .bz {
            padding: 0 90px;
            .ant-steps {
              padding: 0 140px;
            }
          }
          .yz {
            .inp_tit {
              margin: 0 20px;
            }
            input {
              width: 40%;
              border: 0 !important;
              outline: none;
              color: #000;
              padding: 10px;
              font-size: 14px;
              border-bottom: 1px solid #ccc !important;
              //   border-bottom: 1px solid #0076fe!important;
            }

            .form_yz {
              color: red;
              i {
                margin: 0 10px;
              }
            }
            .inp_tit {
              display: inline-block;
              width: 17%;
              text-align: right;
            }
          }
          .yzm {
            margin: 50px 0;
            input {
              width: 23.5%;
              margin-right: 20px;
            }
            .code {
              position: relative;
              .dateup {
                position: absolute;
                top: -7px;
                left: 1px;
                display: inline-block;
                width: 100px;
                height: 29px;
                background: rgba(255, 255, 255, 0.8);
                text-align: center;
                line-height: 29px;
              }
            }
          }
          .qrmm {
            margin: 50px 0;
          }
          .over {
            text-align: center;
            .success {
              font-size: 24px;
              color: #0075ff;
              margin-bottom: 10px;
              i {
                margin-right: 10px;
              }
            }
            .center {
              line-height: 30px;
            }
          }

          .sub {
            position: absolute;
            width: 100%;
            left: 30%;
            bottom: 51px;
            button {
              width: 40%;
              height: 54px;
              background-color: #0076fe;
              color: #fff;
            }
          }
        }
      }
    }
    .footer {
      position: relative;
      width: 100%;
      background-color: #f3f7f9;
      height: 150px;
      .fot_tit {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;
        color: #999;
      }
    }
  }
}
</style>
